﻿<template>
    <el-dialog ref="dlg" v-model="modelValue2" :fullscreen="fullscreen || width=='100%'" :lock-scroll="false" :width="width" append-to-body
        :title="title" :draggable="true" :close-on-click-modal="false" :close-on-press-escape="true" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <slot name="header">
                <div class="my-header">
                    <button class="iconbtn" type="button" v-if="$mbh5">
                        <el-icon :size="18" color="#409EFC" @click="close" ><ArrowLeftBold /></el-icon>
                    </button>
                    <div :id="titleId" :class="titleClass" style="flex: 1; text-align: center;">{{ title }}</div>
                    
                    <button class="iconbtn" type="button" v-if="!$mbh5">
                        <el-icon :size="18" color="#409EFC" @click="toFullscreen"><FullScreen /></el-icon>
                    </button>
                    <button class="iconbtn" type="button" v-if="!$mbh5">
                        <el-icon :size="18" color="#409EFC" @click="close"><Close /></el-icon>
                    </button>
                </div>
            </slot>
        </template>
        <div ref="loading">
            <slot></slot>
        </div>
        <template #footer>
            <slot name="footer"></slot>
        </template>
    </el-dialog>
</template>

<script>
import { toRaw } from 'vue';
import store from './store.js';
import { FullScreen, Close, ArrowLeftBold } from '@element-plus/icons-vue';

export default {
    name: "MyDialog",
    emits: ["close", "update:modelValue","show"],
    components: {
        Close,
        FullScreen,
        ArrowLeftBold
    },
    props: {
        modelValue: Boolean,
        title: String,
        width: [Number, String],
    },
    created() {
        this.fullscreen = this.$mbh5 == true;
    },
    data() {
        return {
            fullscreen: false,
            _old_loading_el:null,
        };
    },
    methods: {
        close() {
            this.$emit("close");
            this.$emit("update:modelValue", false);
        },
        toFullscreen() {
            this.fullscreen = !this.fullscreen;
        }
    },
    computed:{
        modelValue2:{
            get(){
                return this.modelValue;
            },
            set(val){
                this.$emit("update:modelValue", val);
            }
        }
    },
    watch: {
        modelValue(val, oldValue) {
            if (val) {
                this.$nextTick(()=>{
                    this._old_loading_el = window._lucas_loading_el;
                    window._lucas_loading_el = this.$refs.loading;
                    this.$emit("show");
                    store.pushDlg(this);
                })
            } else {
                window._lucas_loading_el = this._old_loading_el? toRaw(this._old_loading_el):null;
                store.popupDlg(this);
            }
        },
    },
};
</script>

<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.iconbtn{
    border: none;
    margin: 0 !important;
    padding: 0 4px !important;
}
</style>

<style>
    .el-dialog__header{
        margin-right:0 !important;
        padding: 10px 0 0 0 !important;
    }
</style>